<template>
  <div class="main-nav">
    <div class="search-box flex-box">
      <i></i>
      <input type="text" @click="searchBoxShow">
    </div>
    <div class="gb-sorts" id="sorts">
      <div class="nav-list" ref="navList">
        <div class="nav-items flex-box"
         v-for="(item,index) in lists"
         @click="changeSlide(index)" 
         :key = "index" 
         :ref="'navItems'+index">
          <p :class="{active:activeIndex===index}">{{item.name}}</p>
        </div>
      </div>
      <div class="nav-main" v-on:scroll.passive="mainScroll" ref="navMain">
        <div class="sort-lists" 
          v-for="(item,index) in lists"  
          :key = "index" 
          :ref="'sortList'+index">
          <div class="sort-lists-banner" v-if="item.imgList">
           <img v-lazy="$BASEPATH + item.imgList[0].path">
          </div>
          <h3>{{item.name}}</h3>
          <ul>
            <li v-for="(items,index) in item.allListDto.allList" 
              @click="toProDetail(items.id)"
              :key = "index">
              <div class="sort-lists-img">
                <img v-if="items.img" v-lazy="$BASEPATH + items.img.path">
              </div>
              <p>{{items.name}}</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// @ is an alias to /src
export default {
  name: 'mallCategory',
  data() {
    return {
      lists: null,
      activeIndex: 0
    }
  },
  components: {},
  computed: {
    swiperNav() {
      return this.$refs.swiperNav.swiper
    },
    swiperSorts() {
      return this.$refs.swiperSorts.swiper
    }
  },
  methods: {
    toProDetail(goodsId) {
      this.$router.push({ name: 'productdetail', params: { id: goodsId } })
    },
    changeSlide(a) {
      // this.activeIndex = a
      // this.$refs.navMain.scrollTo(0, this.$refs['sortList' + a][0].offsetTop)
      this.$refs.navMain.scrollTo({
        top: this.$refs['sortList' + a][0].offsetTop,
        behavior: 'smooth'
      })
      // .then(function() {
      //   console.log('pppp')
      // })
    },
    searchBoxShow() {
      this.$router.push('/searchbox')
    },
    mainScroll() {
      let curY = this.$refs.navMain.scrollTop
      // topLen = this.$refs.navMain.offsetHeight
      for (let i = 0; i < this.lists.length; i++) {
        if (
          this.$refs['sortList' + i][0].offsetTop <
          curY + 10
          // this.$refs['sortList' + (i + 1)][0].offsetTop > curY - 10
        ) {
          this.activeIndex = i
        }
      }
      let scrollLen =
        this.$refs['navItems' + this.activeIndex][0].offsetTop - this.$refs.navList.offsetHeight
      this.$refs.navList.scrollTo(0, scrollLen + 48)
    }
  },
  created() {
    this.$API.getCategory().then(data => {
      console.log(data)
      this.lists = data.data
    })
    // this.$axios
    //   .get('/data/classify.data.json')
    //   .then(data => {
    //     console.log(data)
    //     this.lists = data.data.result.RL
    //   })
    //   .catch(err => {
    //     console.log(err)
    //   })
  },
  activated() {
    this.activeIndex = 0
  },
  mounted() {}
}
</script>
<style lang="scss" scoped>
.main-nav {
  width: 100%;
  height: 100%;
  position: relative;
  background: #fff;
  overflow: hidden;
  .search-box {
    position: relative;
    width: 100%;
    height: 42px;
    background: #f0f0f0;
    position: relative;
    box-sizing: border-box;
    padding: 8px 15px;
    position: relative;
    input {
      width: 100%;
      height: 100%;
      border-radius: 4px;
      background: #fff;
      box-sizing: border-box;
      font-size: 12px;
      padding-left: 36px;
      padding-right: 10px;
      -webkit-appearance: none;
      border: 1px solid #fff;
      color: #666;
    }
    input::-webkit-input-placeholder {
      color: #aaa;
    }
    i {
      width: 16px;
      height: 16px;
      font-family: 'iconfont-gb' !important;
      fill: currentColor;
      font-size: 14px;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      position: absolute;
      z-index: 66;
      left: 26px;
      top: 15px;
      &::before {
        color: #aaa;
        content: '\e622';
      }
    }
    &::after {
      position: absolute;
      width: 100%;
      content: '';
      bottom: 0;
      left: 0;
      border-bottom: 1px solid #d8d8d8;
      transform: scaleY(0.3333);
      transform-origin: bottom; // 设置缩放基点
    }
  }
}
.gb-sorts {
  width: 100%;
  height: 100%;
  height: calc(100% - 42px);
  box-sizing: border-box;
  position: relative;
  .swiper-container {
    height: 100%;
  }
  .nav-list {
    width: 80px;
    // border-right: 1px solid #eee;
    background: #fff;
    height: 100%;
    float: left;
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
    padding: 12px 0;
    box-sizing: border-box;
    &::after {
      position: absolute;
      height: 100%;
      content: '';
      top: 0;
      right: 0;
      border-right: 1px solid #ccc;
      transform: scaleX(0.3333);
      transform-origin: right; // 设置缩放基点
    }
    .nav-items {
      height: 48px;
    }
    p {
      width: 100%;
      color: #555;
      display: block;
      font-size: 12px;
      line-height: 18px;
      box-sizing: border-box;
      text-align: left;
      padding-left: 8px;
      font-weight: bold;
      position: relative;
      &.active {
        color: #1c93d0;
        &::before {
          position: absolute;
          width: 3px;
          height: 18px;
          top: -1px;
          left: 0;
          content: '';
          background: #1c93d0;
        }
      }
    }
  }
  .nav-main {
    background: #fff;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-snap-type: y proximity;
    -webkit-overflow-scrolling: touch; //ios 兼容处理
    #swiper-sorts {
      width: 100%;
      box-sizing: border-box;
      padding-left: 6px;
      padding-right: 6px;
    }
    .swiper-slide {
      height: auto;
      padding-bottom: 24px;
      &:last-child {
        min-height: 100%;
      }
    }
    .sort-lists {
      width: 100%;
      text-align: center;
      scroll-snap-align: start;
      .sort-lists-banner {
        width: 100%;
        height: 110px;
        background: #faa;
        overflow: hidden;
        img {
          width: 100%;
        }
      }
      h3 {
        height: 30px;
        font-size: 15px;
        line-height: 30px;
        text-align: center;
        margin-bottom: 14px;
        margin-top: 16px;
        position: relative;
        display: inline-block;
        color: #333;
        &::before,
        &::after {
          width: 12px;
          height: 1px;
          content: '';
          background: #999;
          left: -16px;
          position: absolute;
          top: 13px;
        }
        &::after {
          left: auto;
          right: -16px;
        }
      }
      ul {
        display: block;
        overflow: hidden;
        padding-bottom: 24px;
        li {
          width: 33.33%;
          height: 95px;
          box-sizing: border-box;
          padding: 6px;
          float: left;
          text-align: center;
          margin-bottom: 9px;
          .sort-lists-img {
            width: 100%;
            height: 60px;
            background: url(../../assets/img/loading.gif) center no-repeat;
            img {
              height: 100%;
            }
          }
          p {
            max-height: 32px;
            line-height: 16px;
            font-size: 12px;
            box-sizing: border-box;
            margin-top: 7px;
            color: #666;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
          }
        }
      }
      &:last-child {
        min-height: calc(100vh - 0.8rem);
      }
    }
  }
}
</style>
